<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户流水</title>
    <style>
        body {
            margin: 0;
            font-family: "Microsoft YaHei";
            background-color: #f4f6f9;
            color: #333;
        }

        /* 顶部导航栏 */
        .top-nav {
            width: 95%;
            height: 80px;
            background-color: #1E90FF;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: white;
            padding: 0 30px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .top-nav .logo {
            font-size: 25px;
            font-weight: bold;
            letter-spacing: 1px;
            margin-left: 20px;
        }

        .top-nav .user {
            font-size: 16px;
        }

        .container {
            display: flex;
            height: calc(100vh - 60px);
        }

        /* 左侧导航栏 */
        .sidebar {
            width: 200px;
            background-color: #2F4F9D;
            color: white;
            display: flex;
            flex-direction: column;
            padding-top: 30px;
        }

        .sidebar a {
            padding: 15px 20px;
            text-decoration: none;
            color: white;
            font-size: 16px;
            display: block;
            text-align: center;
        }

        .sidebar a:hover,
        .sidebar a.active {
            background-color: #4169E1;
            border-left: 5px solid #FFD700;
        }

        /* 主体内容 */
        .main-content {
            flex: 1;
            padding: 20px 40px;
        }

        .main-content h1 {
            color: #1E90FF;
            font-size: 26px;
            margin-bottom: 20px;
        }

        /* 查询表单 */
        .filter-form {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }

        .filter-form label {
            margin-right: 10px;
            font-size: 15px;
        }

        .filter-form input,
        .filter-form select {
            margin-right: 20px;
            padding: 5px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .filter-form button {
            background-color: #1E90FF;
            color: white;
            border: none;
            padding: 6px 14px;
            border-radius: 4px;
            cursor: pointer;
        }

        .filter-form button:hover {
            background-color: #187bcd;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }

        thead {
            background-color: #1E90FF;
            color: white;
        }

        th,
        td {
            padding: 14px 10px;
            text-align: center;
            border-bottom: 1px solid #ddd;
            word-break: break-all;
        }

        tbody tr:hover {
            background-color: #f1f7ff;
        }

        /* 适配小屏幕 */
        @media (max-width: 1200px) {
            .main-content {
                padding: 20px 15px;
            }

            th,
            td {
                padding: 12px 5px;
                font-size: 14px;
            }
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                flex-direction: row;
                justify-content: space-around;
                padding: 10px 0;
            }

            .sidebar a {
                padding: 10px;
                font-size: 14px;
            }

            table {
                font-size: 13px;
            }

            .filter-form {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }

            .filter-form input,
            .filter-form select,
            .filter-form button {
                margin-right: 0;
                flex: 1 1 auto;
                min-width: 120px;
            }
        }
    </style>
</head>

<body>

<!-- 顶部导航栏 -->
<div class="top-nav">
    <div class="logo">智慧银行系统</div>
    <div class="user">亲爱的 张三先生</div>
</div>

<div class="container">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
        <a href="index.html">首页</a>
        <a href="deposit.html">存款服务</a>
        <a href="withdraw.html">取款服务</a>
        <a href="transfer.html">转账服务</a>
        <a href="transactions.html" class="active">账户流水</a>
        <a href="user.html">个人中心</a>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
        <h1>账户流水记录</h1>

        <!-- 查询表单 -->
        <div class="filter-form">
            <label for="date">日期：</label>
            <input type="date" id="date">
            <label for="transType">交易类型：</label>
            <select id="transType">
                <option value="">全部</option>
                <option value="FIXED_DEPOSIT">定期存款</option>
                <option value="DEPOSIT">活期存款</option>
                <option value="WITHDRAW">取款</option>
                <option value="TRANSFER">转账</option>
            </select>
            <button onclick="filterTransactions()">查询</button>
        </div>

        <!-- 流水表格 -->
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>交易时间</th>
                <th>金额（元）</th>
                <th>交易类型</th>
                <th>源账户ID</th>
                <th>目标账户ID</th>
                <th>到期时间</th>
                <th>到期利息（元）</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody id="transaction-table"></tbody>
        </table>
    </div>
</div>

<script>
    // 将后端枚举类型转换为中文显示
    function transTypeToCN(type) {
        switch (type) {
            case 'DEPOSIT': return '活期存款';
            case 'WITHDRAW': return '取款';
            case 'TRANSFER': return '转账';
            case 'FIXED_DEPOSIT': return '定期存款';
            default: return type;
        }
    }

    window.onload = function () {
        const user = JSON.parse(localStorage.getItem("user"));
        if (!user) {
            window.location.href = "login.html";
            return;
        }

        const userDisplay = document.querySelector(".user");
        const title = user.gender === "男" ? "先生" : "女士";
        userDisplay.textContent = `亲爱的 ${user.name}${title}`;

        // 页面加载时自动显示该用户交易记录
        filterTransactions();
    };



    // 加载表格数据
    function loadTable(data) {
        const table = document.getElementById("transaction-table");
        table.innerHTML = "";
        if (data.length === 0) {
            table.innerHTML = `<tr><td colspan="9">暂无交易记录</td></tr>`;
            return;
        }

        data.forEach((item, index) => {
            const row = `
                <tr>
                    <td>${index + 1}</td>
                    <td>${item.time ? item.time.substring(0,10) : '-'}</td>
                    <td>${item.amount.toFixed(2)}</td>
                    <td>${transTypeToCN(item.type)}</td>
                    <td>${item.sourceAccount || '-'}</td>
                    <td>${item.targetAccount || '-'}</td>
                    <td>${item.maturityDate ? item.maturityDate.substring(0,10) : '-'}</td>
                    <td>${item.maturityInterest ? item.maturityInterest.toFixed(2) : '0.00'}</td>
                    <td>${item.remark || '-'}</td>
                </tr>
            `;
            table.innerHTML += row;
        });
    }

    // 筛选交易记录（仅显示与当前用户相关的）
    // 筛选交易记录（仅显示与当前用户相关的）
    function filterTransactions() {
        const user = JSON.parse(localStorage.getItem("user"));
        if (!user) return;

        const cardNumber = String(user.cardNumber || '');  // 登录用户卡号，空值保护
        const date = document.getElementById("date").value;
        const transType = document.getElementById("transType").value;

        fetch('http://localhost:8080/transactions/all')
            .then(response => response.json())
            .then(data => {
                console.log("后端返回数据:", data);

                // 关键修改：考虑 sourceAccountId / targetAccountId 为空值
                let filtered = data.filter(t => {
                    const src = String(t.sourceAccountId || '');
                    const tgt = String(t.targetAccountId || '');
                    return src === cardNumber || tgt === cardNumber;
                });

                // 按日期筛选
                if (date) filtered = filtered.filter(t => t.time && t.time.startsWith(date));

                // 按交易类型筛选
                if (transType) filtered = filtered.filter(t => t.type === transType);

                loadTable(filtered);
            })
            .catch(err => console.error("获取交易记录失败:", err));
    }



</script>


</body>
</html>
